<template>
  <div id="public">
    <div class="leftData">
      <el-alert
    title="上传图片提示"
    type="success"
    description="每次上传图片时只能上传一张，请输入对应图片的标题"
    >
    </el-alert>
    <el-form 
      ref="form" 
      :model="form" 
      label-position="top"
      clearable="true"
      :rules="rules"
      >
      <el-form-item label="请输入图片的标题，用于图片展示的时候显示" prop="title">
        <el-input v-model="form.title" clearable></el-input>
      </el-form-item>
      <el-form-item label="上传图片的格式仅支持 JPG/PNG 格式，且图片大小不超过1MB">
        <el-upload
          class="upload-demo"
          drag
          ref="upload"
          :action="baseURL+'/admin/album/publish/upload'"
          :auto-upload="false"
          :on-change="coverChange"
          :on-success="coverSuccess"
          :limit="1"
          :with-credentials="true"
          list-type="picture"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-button type="primary" @click="submit">发表图片</el-button>
    </el-form>
    
    </div>
    <!-- echarts图表 -->
    <echartsOne></echartsOne>
  </div>
</template>
 
<script>
import echartsOne from "@/components/echarts/echartsOne";
export default {
  name: 'CoverPublish',
  data(){
    return{
      form:{
        title:""
      },
      rules:{
        title:[
          {required:true,trigger:"blur"}
        ]
      },
    }
  },
  methods:{
    // 封面图上传触发
    coverChange(file,fileList){
      const isJPG = /^image\/(jpeg|png)$/.test(file.raw.type)
        const isLt2M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.warning('上传封面图片只能是 JPG/PNG 格式!');
          fileList.pop()
        }
        if (!isLt2M) {
          this.$message.warning('上传封面图片大小不能超过 1MB!');
          fileList.pop()
        }
        return isJPG && isLt2M;
    },
    // 上传图片
    submit(){
      this.$refs.form.validate(v=>{
        if(!v) return false
        this.$refs.upload.submit()
      })
    },
    // 封面图上传成功
    coverSuccess(res){
      if(res.code) return this.$message.warning(res.mes)
      this.publishCorver(res.data)
    },
    // 发表封面图
    async publishCorver(src){
      let {data} = await this.$axios.post("/admin/album/publish/publish",{
        title:this.form.title
        ,
        src,
        type:"封面相册"
      })
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      this.$refs.form.resetFields()
      this.$refs.upload.clearFiles()
    }
  },
  components:{
    echartsOne
  }
}
</script>

<style scoped lang='less'>
#public{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .leftData{
    flex:1.5;
    margin-right:20px;
  }
} 
</style>